<template>
  <div class="jian20">
    <div class="content">
      <div class="name">轰-6k</div>
      <div class="title">“战神”</div>
      <img
        class="plan"
        src="https://p2.ssl.qhimg.com/t01da4b0eba9b8597ee.png"
      />

      <div class="width">机高10.36米</div>
      <div class="height">机长：34.8米</div>
      <div class="area">翼展：32.99米</div>
    </div>

    <div class="text">
      <div class="left" style="width: 40%">
        <div class="title">
          <div></div>
          简 介
        </div>

        <div class="item">
          <div class="dot"></div>
          <div class="item-text">
            轰-6K型轰炸机是重要的空基远程打击力量，在
            纪念中国人民抗日战争暨世界反法西斯战争胜利 70周年阅兵式上首次亮相
          </div>
        </div>

        <div class="item">
          <div class="dot"></div>
          <div class="item-text">
            与2009年国庆阅兵中亮相的轰-6H 相比，轰-6K改装率高达90%
          </div>
        </div>

        <div class="item">
          <div class="dot"></div>
          <div class="item-text">
            轰-6K作为轰-6家族的大改型号，除了在气动设计、机载设备、航空发动机等方面进行全面升级，最主要的就是作为长剑-20空射巡航导弹的发射台
          </div>
        </div>
      </div>
      <div class="left" style="width: 60%">
        <img
          class="plan1"
          src="https://p5.ssl.qhimg.com/t014dc12d642f3514c4.png"
        />
        <div class="plan-name">
          <div>//重型挂点数----6个//</div>
          <div>//最大载弹量--12吨//</div>
          <div>>>> K/AKD-63（鹰击63）反舰导弹</div>
          <div>>>> K/AKD-88（鹰击88）反舰导弹</div>
          <div>>>> K/AKD-20（长剑20）巡航导弹</div>
          <div>>>> 鹰击-12重型反舰导弹</div>
          <div>>>> 鹰击-83重型反舰导弹</div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
  .jian20 {
    background-image: url(../assets/WechatIMG165.jpg);
    background-size: cover;
    width: 100%;
    height: 100vh;
    overflow: auto;

    .content {
      padding-left: 3vw;
      padding-top: 3vw;
      width: 100%;
      position: relative;
      .name {
        font-size: 3vw;
      }
      .title {
        font-size: 2vw;
      }
      .plan {
        width: 65vw;
        margin-left: 12vw;
        position: relative;
        top: -6vw;
      }

      .width {
        position: absolute;
        left: 4vw;
        width: 16vw;
        text-align: center;
        font-size: 2vw;
        border-bottom: 2px solid yellow;
        top: 27vw;
        transform: rotateZ(-110deg);
        transform-origin: right bottom;
        &::after {
          content: '';
          position: absolute;
          left: -8px;
          bottom: -7px;
          border-width: 6px;
          border-style: solid;
          border-color: transparent yellow transparent transparent;
        }
        &::before {
          content: '';
          position: absolute;
          right: -8px;
          bottom: -7px;
          border-width: 6px;
          border-style: solid;
          border-color: transparent transparent transparent yellow;
        }
      }

      .height {
        position: absolute;
        left: 17vw;
        width: 50vw;
        text-align: center;
        font-size: 3vw;
        border-bottom: 2px solid yellow;
        top: 17vw;
        transform: rotateZ(-24deg);
        transform-origin: left bottom;
        &::after {
          content: '';
          position: absolute;
          left: -8px;
          bottom: -7px;
          border-width: 6px;
          border-style: solid;
          border-color: transparent yellow transparent transparent;
        }
        &::before {
          content: '';
          position: absolute;
          right: -8px;
          bottom: -7px;
          border-width: 6px;
          border-style: solid;
          border-color: transparent transparent transparent yellow;
        }
      }

      .area {
        position: absolute;
        left: 23vw;
        width: 50vw;
        text-align: center;
        font-size: 3vw;
        border-bottom: 2px solid yellow;
        top: 15vw;
        transform: rotateZ(25deg);
        transform-origin: left bottom;
        color: #fff;
        &::after {
          content: '';
          position: absolute;
          left: -8px;
          bottom: -7px;
          border-width: 6px;
          border-style: solid;
          border-color: transparent yellow transparent transparent;
        }
        &::before {
          content: '';
          position: absolute;
          right: -8px;
          bottom: -7px;
          border-width: 6px;
          border-style: solid;
          border-color: transparent transparent transparent yellow;
        }
      }

      .enter {
        position: absolute;
        left: 22vw;
        width: 30vw;
        text-align: center;
        font-size: 3vw;
        border-bottom: 2px solid yellow;
        top: 40vw;

        .line {
          width: 15vw;
          height: 2px;
          background: yellow;
          position: absolute;
          right: -15vw;
          bottom: -2px;
          transform-origin: left bottom;
          transform: rotateZ(-80deg);
        }
      }

      .zhong1 {
        position: absolute;
        left: 0vw;
        width: 25vw;
        text-align: center;
        font-size: 2vw;
        border-bottom: 2px solid yellow;
        top: 28vw;
        transform-origin: left bottom;

        &::before {
          content: '';
          position: absolute;
          right: -8px;
          bottom: -7px;
          border-width: 6px;
          border-style: solid;
          border-color: transparent transparent transparent yellow;
        }
      }
    }

    .text {
      width: 100%;
      display: flex;
      margin-top: 3vw;
      padding-bottom: 5vw;
      overflow: hidden;
      .left {
        width: 50%;
        padding-left: 4vw;
        padding-right: 4vw;
        position: relative;
        .title {
          display: flex;
          align-items: center;
          height: 3.5vw;
          font-size: 2.5vw;
          div {
            width: 2vw;
            height: 3.5vw;
            margin-right: 1vw;
            border: 1px solid brown;
            background: yellow;
          }
        }
        .item {
          display: flex;
          margin-top: 1vw;
          .dot {
            width: 1vw;
            height: 1vw;
            background: yellow;
            margin-right: 1vw;
            margin-left: 0.5vw;
            transform: rotateZ(45deg);
            position: relative;
            top: 0.5vw;
          }
          .item-text {
            flex: 1;
            font-size: 1.5vw;
          }
        }

        .bullt {
          position: relative;

          img {
            width: 20vw;
            margin-left: 5vw;
            margin-top: 3vw;
            transform: rotateZ(-70deg);
          }

          .area {
            position: absolute;
            left: 12vw;
            width: 20vw;
            text-align: center;
            font-size: 3vw;
            border-bottom: 2px solid yellow;
            top: 19vw;

            .line {
              width: 10vw;
              height: 2px;
              background: yellow;
              position: absolute;
              left: -10vw;
              bottom: -2px;
              transform-origin: right bottom;
              transform: rotateZ(80deg);
            }
          }
        }

        .plan1 {
          margin-top: 5vw;
          width: 40vw;
        }
        .plan2 {
          width: 30vw;
        }

        .plan-name {
          width: 30vw;
          height: 30vw;
          background: rgba(135, 206, 235, 0.8);
          position: absolute;
          right: 5vw;
          top: 0vw;
          font-size: 1.5vw;
          line-height: 4vw;
          padding-left: 2vw;
        }
      }
    }
  }
</style>
